<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            line-height: 300px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dotted darkcyan;
        }
    </style>
</head>
<body>
    <div><span>拖动图片到这里上传</span></div>
</body>
</html>
<script>
    $(function(){
        $('div').on({
            dragover:function(ev){
                // 先阻止默认事件
                ev.preventDefault();
            },
            drop:function(ev){
                console.log(ev);
                ev.preventDefault();
                file=ev.originalEvent.dataTransfer.files[0];
                console.dir(file);
                if(file.type.startsWith('image')){
                    $('div').append('<img src='+URL.createObjectURL(file)+'>');
                    $('span').hide();
                }else{
                    alert('智能上传图片');
                }
            }
        })
    })
</script>